<template>
  <div>
    <el-input
      placeholder="请输入查找内容"
      v-model="queryInfo.query"
      class="input-with-select"
      clearable
      @clear="clearInput"
    >
      <el-button slot="append" icon="el-icon-search" @click="searchUniversity">
      </el-button>
    </el-input>
    <span style="margin-left: 20px">所属地查询：</span>
    <el-cascader
      class="cascader"
      size="large"
      :options="options"
      v-model="queryOptions"
      @change="searchSchoolByArea"
      clearable
    >
    </el-cascader>
  </div>
</template>

<script>
import { provinceAndCityData } from "element-china-area-data"; //引入
export default {
  name: "SearchBar",
  props: {
    queryInfo: {
      type: Object,
      default() {
        return {
          //查询的内容
          query: "",
          // 当前页数
          pageNum: 1,
          // 每页显示多少数据
          pageSize: 5,
        };
      },
    }
  },
  data() {
    return {
        options: provinceAndCityData,
        selectedOptions: [],
        queryOptions: [],
    };
  },
  methods: {
    searchUniversity() {
      this.$emit("searchByName");
    },
    clearInput() {
      this.$emit("clearInput");
    },
    searchSchoolByArea() {
      this.$emit("searchByArea", this.queryOptions);
    }
  },
};
</script>

<style lang="scss" scoped>
.cascader {
  width: 180px;
}
.input-with-select {
  background-color: #fff;
  width: 250px;
}
</style>
